<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>定时更新的广告栏</title>
	<style>
		#app{
			text-align: center;
			padding: 50px;
		}
		.banner{
			width: 600px;
			height: 150px;
			line-height: 150px;
			text-align: center;
			box-shadow: 5px 5px 10px #888888;
			font-size: 48px;
			font-weight: bolder;
			background-color: #033592;
			color: #ffffff;
			margin:  0 auto;
			border-radius: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="banner">
			{{ adTitle }}
		</div>
	</div>
	<script src="./js/vue.min.js"></script>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				ads:[],
				index:0,
				adTitle:""
			},
			created:function(){
				this.ads=[
					"地球交通委提醒您：",
					"道路千万条，",
					"安全第一条。",
					"行车不规范，",
					"亲人两行泪。"
				];
				this.adTitle=this.ads[0];
			},
			mounted:function(){
				//声明一个变量指向Vue实例，保证作用域一致
				var _this=this;
				this.timer=setInterval(function(){
					if(_this.index<_this.ads.length-1){
						_this.index++;
					}else{
						_this.index=0;
					}
					//修改Banner中的内容
					_this.adTitle=_this.ads[_this.index]
				},3000);
			},
			beforeDestroy:function(){
				if(this.timer){
					//在Vue实例被销毁前，清楚定时器
					clearInterval(this.timer);
				}
			}
		});
	</script>
</body>
</html>